<template>
  <div class="container  p-3" v-cloak>
    <form>
      <div class="form-group">
        <label for="exampleFormControlInput1">邮箱</label>
        <input type="email" class="form-control "  placeholder="name@example.com" v-model="userInfo.email" disabled>
      </div>
      <div class="form-group">
        <label for="exampleFormControlInput1">用户昵称</label>
        <input type="text" :class="userInfo.check.name?'form-control is-valid':'form-control'" @blur="CheckName()" v-model="userInfo.name" :disabled="ischange">
      </div>
      <div class="form-group custom-control custom-switch" v-if="!ischange">
        <input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="userInfo.changepwd">
        <label class="custom-control-label" for="customSwitch1">是否修改密码</label>
      </div>
      <div class="form-group" v-if="!ischange && userInfo.changepwd">
        <label for="exampleFormControlInput1">旧密码</label>
        <input type="password" :class="userInfo.check.oldpwd?'form-control is-valid':'form-control'" placeholder="请输入密码" @blur="CheckOldPwd()" v-model="userInfo.reoldpwd" :disabled="ischange">
      </div>
      <div class="form-group" v-if="!ischange && userInfo.changepwd">
        <label for="exampleFormControlInput1">新密码</label>
        <input type="email" :class="userInfo.check.newpwd?'form-control is-valid':'form-control'" placeholder="请输入密码" @blur="CheckNewPwd()" v-model="userInfo.newPwd" :disabled="ischange">
      </div>
      <div class="form-group">
        <label for="">手机号</label>
        <input type="email" :class="userInfo.check.phone?'form-control is-valid':'form-control'" @blur="CheckPhone()" placeholder="要修改的手机号"
          v-model="userInfo.phone" :disabled="ischange">
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect1">性别</label>
        <select class="form-control" id="exampleFormControlSelect1" v-model="userInfo.sex" :disabled="ischange">
          <option v-if="ischange">{{userInfo.sex}}</option>
          <option>未知</option>
          <option>男</option>
          <option>女</option>
        </select>
      </div>
      <div class="form-group">
        <label for="">修改头像</label>
        <input type="file" class="form-control custom-file" :disabled="ischange">
      </div>
      <hr>
      <div class="form-group float-right">
        <input type="button" class="btn btn-primary" @click="Change()" value="修改信息">
        <input type="button" class="btn btn-primary " value="提交" :disabled="ischange" @click="Updata()">
      </div>
    </form>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  export default {
    name: "PerFun",
    data() {
      return {
        urlfix: "http://127.0.0.1:9000",
        msg: this.$route.params.id,
        // 默认不可编辑
        ischange: true,
        userInfo: {
          check: {
            name: false,
            phone: false,
            oldpwd: false,
            newpwd: false,
          },
          // 总验证 默认通过验证
          isflag:true,
          id: '',
          name: "",
          email: "",
          oldPwd: '',
          reoldpwd: '',
          newPwd: '',
          phone: '',
          sex: '',
          img: '',
          //修改密码
          changepwd:false
        }
      }
    },
    methods: {
      Change: function() {
        //不允许修改，ture 不允许。false 允许,
        this.ischange = false
      },
      Updata: function() {
        let that = this
        let url = this.urlfix + "/personal/updateOne"
        if(that.userInfo.changepwd){
          $.each(that.userInfo.check,function(index,item){
            if(item == false){
             that.userInfo.isflag=false
            }
          })
        }else{

          if(that.userInfo.check.name==false || that.userInfo.check.phone==false){
            that.userInfo.isflag=false
          }
        }
        console.log(that.userInfo.isflag)
        if(!that.userInfo.isflag){
          alert("信息不正确")
          that.userInfo.isflag=true
          return
        }
        let data = {
          userId: that.userInfo.id,
          userName: that.userInfo.name,
          userEmail: that.userInfo.email,
          userPhone: that.userInfo.phone,
          userPassword: that.userInfo.changepwd?that.userInfo.newPwd:'',
          userSex: that.userInfo.sex,
          userProfilePhoto: that.userInfo.img
        }
        $.post(url, data, function(data) {
          if (data.code === 20000) {
            alert("修改成功")
            that.ischange = true
            location.reload()
          }
        })
      },
      CheckPhone: function() {
        if (!(/^1[3456789]\d{9}$/.test(this.userInfo.phone))) {
          alert("手机号码有误，请重填");
          this.userInfo.check.phone = false;
        } else {
          this.userInfo.check.phone = true;
        }
      },
      CheckName:function(){
        if(this.userInfo.name.length>2 && this.userInfo.name.length<13){
          this.userInfo.check.name=true
        }else{
          alert("用户昵称只能为2-12位")
          this.userInfo.check.name=false
        }
      },
      CheckNewPwd:function(){
        if(this.userInfo.newPwd.length>5 && this.userInfo.newPwd.length<=18){
          this.userInfo.check.newpwd=true
        }else{
          alert("密码必须为6-18位")
          this.userInfo.check.newpwd=false
        }
      },
      CheckOldPwd:function(){
        console.log(this.userInfo.oldPwd,md5(this.userInfo.reoldpwd).toUpperCase())
        if (this.userInfo.oldPwd != md5(this.userInfo.reoldpwd).toUpperCase()) {
          alert("旧密码不正确，请重新输入")
          this.userInfo.check.oldpwd=false
        }else{
          this.userInfo.check.oldpwd=true
        }
      }
    },
    created() {
      let url = this.urlfix + "/personal/selectUserInfo"
      let that = this
      $.post(url, {
        userEmail: window.sessionStorage.getItem("userEmail")
      }, function(data) {
        if (data.code === 20000) {
          that.userInfo.id = data.data.userId
          that.userInfo.email = data.data.userEmail
          that.userInfo.phone = data.data.userPhone
          that.userInfo.name = data.data.userName
          that.userInfo.sex = data.data.userSex ? data.data.userSex : "未知"
          that.userInfo.oldPwd = data.data.userPassword
        }

      })
    }
  }
</script>

<style>
</style>
